<!--折线图堆叠-->
<template>
    <div id="main" style="margin: 10px auto;width: 500px;height: 500px;"></div>
</template>
<script>
    import request from "../utils/request";
    //
    const echarts = require('echarts');
    //
    export default {
        name: "ReviewTestKnowledge",
        data () {
            return {
                data1:[]
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart(){
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                request.get("/reviewTestKnowledge",{ // 请求/wordCloud接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=> {
                    // this.data2 = [];
                    for (let i = 0; i < res.data.records.length; i++) {
                        this.data1.push(res.data.records[i]['num']);

                    }
                    option = {

                        title: {
                            text: '校招测试岗考点分布图',
                            subtext: '数据来自牛客网',
                        },
                        // legend: {
                        //     data: ['预算分配（Allocated Budget）']
                        // },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 20,
                            feature: {
                                saveAsImage: {}
                            }
                        },

                        radar: {
                            textStyle: {
                                color: 'black' // 文字颜色
                            },
                            shape: 'circle',
                            indicator: [
                                { name: '软件测试实例', max: 90},
                                { name: '语言基础', max: 90},
                                { name: '软件测试\n基础知识', max: 90},
                                { name: '计算机基础', max: 90},
                                { name: '算法与\n数据结构', max: 90},
                                { name: '技术发展', max: 90}
                            ]
                        },
                        series: [{

                            itemStyle: {
                                normal: {
                                    areaStyle: {
                                        type: 'default',
                                        opacity: 0.8, // 图表中各个图区域的透明度
                                        color: "#1686c2" // 图表中各个图区域的颜色
                                    }
                                }
                            },
                            type: 'radar',
                            data: [
                                {
                                    value: this.data1,
                                    name: '考点分布图'
                                }
                            ]
                        }]
                    };

                    option && myChart.setOption(option);
                })

            },
        }
    }
</script>

<style scoped>

</style>